<template>
  <div class="home-page">
    <header-bar />
    <div>
      <banner-slide :slides="bannerData"/>
    </div>
    <div class="home-main">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in imgArr" :key="index">
            <img :src="item.img_url" />
          </div>
        </div>
      </div>
      <div class="home-fast-nav">
        <dl v-for="(item,index) in fastNavArr" :key="index">
          <dt>
            <img :src="item.icon" alt />
          </dt>
          <dd>{{item.name}}</dd>
        </dl>
      </div>
      <div class="home-day-buy">
        <p>
          <span>
            每日必购
          </span>
          <span>
            大家都在买
          </span>
        </p>
        <img :src="item.url" v-for="(item,index) in dayBuyArr" :key="index">
      </div>
      <div class="home-roll-scroll">
        <p>
          <span v-for="(item,index) in rollArr" 
          :key="index"
          :class="{'active':index===ind}"
          @click="rollfn(index)"
          >{{item}}</span>
        </p>
        <md-tab-bar :menu="tabMenuData" @change="tabChange"></md-tab-bar>
        <div class="roll-main">

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper"; 
import HeaderBar from './components/headerBar'
import BannerSlide from './components/bannerSlide'
export default {
  name: "Home",
  data() {
    return {
      bannerData:[],
      tabMenuData:[],
      products:[],
      fetchParams:{
        page:1,
        pageSize:5
      },
      ind:0,
      imgArr: [],
      fastNavArr: [
        {
          icon: require("@/assets/img/chao1.png"),
          name: "蔬菜每日鲜"
        },
        {
          icon: require("@/assets/img/chao2.png"),
          name: "肉蛋禽"
        },
        {
          icon: require("@/assets/img/chao3.png"),
          name: "母婴天地"
        },
        {
          icon: require("@/assets/img/chao4.png"),
          name: "进店必买"
        },
        {
          icon: require("@/assets/img/chao5.png"),
          name: "美通卡"
        },
        {
          icon: require("@/assets/img/chao1.png"),
          name: "早晚市"
        },
        {
          icon: require("@/assets/img/chao2.png"),
          name: "品牌汇"
        },
        {
          icon: require("@/assets/img/chao3.png"),
          name: "领券中心"
        },
        {
          icon: require("@/assets/img/chao4.png"),
          name: "支付优惠"
        },
        {
          icon: require("@/assets/img/chao5.png"),
          name: "直采品牌"
        }
      ],
      dayBuyArr:[
        {
          url: require("@/assets/img/1.jpg")
        },
        {
          url: require("@/assets/img/2.jpg")
        },
        {
          url: require("@/assets/img/3.jpg")
        }
      ],
      rollArr:[
        '新晋爆款','每日必抢','水果','蔬菜','肉蛋','零食'
      ]
    };
  },
  components:{
    HeaderBar,
    BannerSlide
  },
  cteated(){
    this.initData()
  },
  // mounted(){
  //   this.initEvent()
  // },
  destroyed() {
    window.removeEventListener('scroll',this.scroll)
  },
  methods:{
     rollfn(index){
       this.ind=index
    },
    async initData(){
      const bannerData=await this.$api.home.banner()
      const tabMenuData=await this.$api.home.tab()
      this.bannerData=bannerData.data
      this.tabMenuData=tabMenuData.data
  },
    tabChange(index,row){
      this.fetchParams.page=1
      console.log(index,row)
    },
  async fetchProductList(){
      const productsData=await this.$api.product.list(this.fetchParams)
      this.products=productsData.data
    },
    initEvent(){
      window.addEventListener('scroll',this.scroll)
    },
    scroll(){
      const windowHeight=window.innerHeight
      const bodyHeight=document.body.innerHeight
      const scrollY=window.scrollY
      console.log(windowHeight,bodyHeight,scrollY)
      if(scrollY+windowHeight ===bodyHeight){
        console.log('到底部')
        this.fetchParams.page+=1
        this.fetchProductList()
      }
    }
  },
  async mounted() {
    let resSwiper = await this.$http.get("/api/banner");
    this.imgArr = resSwiper.data.data;
    this.$nextTick(() => {
      new Swiper(".swiper-container", {
        loop: true
      });
    });
    console.log(this.fastNavArr, "DDDDD");
  }
};
</script>

<style lang="scss" scoped>
.home-page {
  @include wh(100%,auto);
  & > .home-head {
    @include wh(100%, 98px);
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    & > label {
      display: flex;
      & > input {
        width: 600px;
        border: 0;
        outline: 0;
      }
    }
    & .dizhi {
      @include wh(60px, 60px);
    }
    & .fangdajing {
      @include wh(60px, 60px);
    }
  }
  & > .home-main {
    flex: 1;
    .swiper-container {
      @include wh(100%, 300px);
      img {
        @include wh(100%, 100%);
      }
    }
    .home-fast-nav {
      font-size: $font-size-s;
      @include flex(row, center, center);
      flex-wrap: wrap;
      dl {
        width: 20%;
        @include flex(column, center, center);
        margin-top: 20px;
      }
       img {
        width:60%;
        height:60%
      }
      dd{
        width:100%;
        text-align: center;
      }
    }
    .home-day-buy{
      @include wh(100%, 400px);
      font-size: $font-size-m;
      margin-top:30px;
      p{
        padding: 20px 0 20px 20px;
        &>span:nth-child(1){
          font-size: $font-size-xl;
          font-weight: 800;
        }
      }
      img{
        width: 33.33%;
        height: 300px;
      }
    }
    .home-roll-scroll{
      font-size: $font-size-m;
      p{
        @include wh(100%,50px);
        @include border1px('bottom');
        @include flex(row,space-around,center);
        padding-bottom: 20px;
        .active{
          color: red;
          font-weight: 600;
        }
     }
     .roll-main{
       height: 300px;
      //  background: #ccc;
     }
    }
  }
}
</style>